<template>
  <h1>hello vue3</h1>
  <ul>
    <!-- 
      路由跳转两种方式：
        1. 声明式导航
          <router-link to="/xxx">xxx</router-link>

        2. 编程式导航
          import { useRouter } from "vue-router";
          const router = useRouter();
          router.push("/xxx");

        如果在路由跳转的时候要做一些其他事情，就用编程式导航
        如果只需要直接路由跳转，用声明式导航

      路由传参的方式：
        1. query

        2. params

        3. meta

     -->
    <!-- 声明式导航 -->
    <!-- <li><router-link to="/home?name=jack&age=18">Home</router-link></li> -->
    <!-- <li>
      <router-link :to="{ path: '/home', query: { name: 'jack', age: 18 } }">
        Home
      </router-link>
    </li> -->
    <li>
      <!-- 注意：需要在路由配置中取名字 -->
      <router-link :to="{ name: 'Home', query: { name: 'jack', age: 18 } }">
        Home
      </router-link>
    </li>
    <!-- 编程式导航 -->
    <li><a @click="goAbout">About</a></li>
    <li><router-link to="/detail/123">Detail</router-link></li>
    <li>
      <!-- 注意：用对象形式，必须使用命名路由 -->
      <router-link
        :to="{
          name: 'Detail',
          params: {
            id: 123,
          },
        }"
      >
        Detail
      </router-link>
    </li>
  </ul>
  <!-- 加载并渲染路由组件 -->
  <router-view></router-view>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const goAbout = () => {
  // router.push("/about?name=jack&age=18");
  // router.push({
  //   path: "/about",
  //   query: { name: "jack", age: 18 },
  // });
  router.push({
    name: "About",
    query: { name: "jack", age: 18 },
  });
};
</script>

<style scoped></style>
